
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon anticon icon-stepforward"></i>
                    <div class="name">stepforward</div>
                    <div class="fontclass">.icon-stepforward</div>
                </li>
            
                <li>
                <i class="icon anticon icon-stepbackward"></i>
                    <div class="name">stepbackward</div>
                    <div class="fontclass">.icon-stepbackward</div>
                </li>
            
                <li>
                <i class="icon anticon icon-forward"></i>
                    <div class="name">forward</div>
                    <div class="fontclass">.icon-forward</div>
                </li>
            
                <li>
                <i class="icon anticon icon-banckward"></i>
                    <div class="name">banckward</div>
                    <div class="fontclass">.icon-banckward</div>
                </li>
            
                <li>
                <i class="icon anticon icon-caretright"></i>
                    <div class="name">caretright</div>
                    <div class="fontclass">.icon-caretright</div>
                </li>
            
                <li>
                <i class="icon anticon icon-caretleft"></i>
                    <div class="name">caretleft</div>
                    <div class="fontclass">.icon-caretleft</div>
                </li>
            
                <li>
                <i class="icon anticon icon-caretdown"></i>
                    <div class="name">caretdown</div>
                    <div class="fontclass">.icon-caretdown</div>
                </li>
            
                <li>
                <i class="icon anticon icon-caretup"></i>
                    <div class="name">caretup</div>
                    <div class="fontclass">.icon-caretup</div>
                </li>
            
                <li>
                <i class="icon anticon icon-rightcircle"></i>
                    <div class="name">right-circle</div>
                    <div class="fontclass">.icon-rightcircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-leftcircle"></i>
                    <div class="name">left-circle</div>
                    <div class="fontclass">.icon-leftcircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-upcircle"></i>
                    <div class="name">up-circle</div>
                    <div class="fontclass">.icon-upcircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-downcircle"></i>
                    <div class="name">down-circle</div>
                    <div class="fontclass">.icon-downcircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-rightcircleo"></i>
                    <div class="name">right-circle-o</div>
                    <div class="fontclass">.icon-rightcircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-leftcircleo"></i>
                    <div class="name">left-circle-o</div>
                    <div class="fontclass">.icon-leftcircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-upcircleo"></i>
                    <div class="name">up-circle-o</div>
                    <div class="fontclass">.icon-upcircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-downcircleo"></i>
                    <div class="name">down-circle-o</div>
                    <div class="fontclass">.icon-downcircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-verticleleft"></i>
                    <div class="name">verticleleft</div>
                    <div class="fontclass">.icon-verticleleft</div>
                </li>
            
                <li>
                <i class="icon anticon icon-verticleright"></i>
                    <div class="name">verticleright</div>
                    <div class="fontclass">.icon-verticleright</div>
                </li>
            
                <li>
                <i class="icon anticon icon-back"></i>
                    <div class="name">rollback</div>
                    <div class="fontclass">.icon-back</div>
                </li>
            
                <li>
                <i class="icon anticon icon-retweet"></i>
                    <div class="name">retweet</div>
                    <div class="fontclass">.icon-retweet</div>
                </li>
            
                <li>
                <i class="icon anticon icon-shrink"></i>
                    <div class="name">shrink</div>
                    <div class="fontclass">.icon-shrink</div>
                </li>
            
                <li>
                <i class="icon anticon icon-arrowsalt"></i>
                    <div class="name">arrowsalt</div>
                    <div class="fontclass">.icon-arrowsalt</div>
                </li>
            
                <li>
                <i class="icon anticon icon-doubleright"></i>
                    <div class="name">doubleright</div>
                    <div class="fontclass">.icon-doubleright</div>
                </li>
            
                <li>
                <i class="icon anticon icon-doubleleft"></i>
                    <div class="name">doubleleft</div>
                    <div class="fontclass">.icon-doubleleft</div>
                </li>
            
                <li>
                <i class="icon anticon icon-arrowdown"></i>
                    <div class="name">arrowdown</div>
                    <div class="fontclass">.icon-arrowdown</div>
                </li>
            
                <li>
                <i class="icon anticon icon-arrowup"></i>
                    <div class="name">arrowup</div>
                    <div class="fontclass">.icon-arrowup</div>
                </li>
            
                <li>
                <i class="icon anticon icon-arrowright"></i>
                    <div class="name">arrowright</div>
                    <div class="fontclass">.icon-arrowright</div>
                </li>
            
                <li>
                <i class="icon anticon icon-arrowleft"></i>
                    <div class="name">arrowleft</div>
                    <div class="fontclass">.icon-arrowleft</div>
                </li>
            
                <li>
                <i class="icon anticon icon-down"></i>
                    <div class="name">down</div>
                    <div class="fontclass">.icon-down</div>
                </li>
            
                <li>
                <i class="icon anticon icon-up"></i>
                    <div class="name">up</div>
                    <div class="fontclass">.icon-up</div>
                </li>
            
                <li>
                <i class="icon anticon icon-right"></i>
                    <div class="name">right</div>
                    <div class="fontclass">.icon-right</div>
                </li>
            
                <li>
                <i class="icon anticon icon-left"></i>
                    <div class="name">left</div>
                    <div class="fontclass">.icon-left</div>
                </li>
            
                <li>
                <i class="icon anticon icon-minussquareo"></i>
                    <div class="name">minus-square-o</div>
                    <div class="fontclass">.icon-minussquareo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-minuscircle"></i>
                    <div class="name">minus-circle</div>
                    <div class="fontclass">.icon-minuscircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-minuscircleo"></i>
                    <div class="name">minus-circle-o</div>
                    <div class="fontclass">.icon-minuscircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-minus"></i>
                    <div class="name">minus</div>
                    <div class="fontclass">.icon-minus</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pluscircleo"></i>
                    <div class="name">plus-circle-o</div>
                    <div class="fontclass">.icon-pluscircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pluscircle"></i>
                    <div class="name">plus-circle</div>
                    <div class="fontclass">.icon-pluscircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-plus"></i>
                    <div class="name">plus</div>
                    <div class="fontclass">.icon-plus</div>
                </li>
            
                <li>
                <i class="icon anticon icon-infocirlce"></i>
                    <div class="name">info-cirlce</div>
                    <div class="fontclass">.icon-infocirlce</div>
                </li>
            
                <li>
                <i class="icon anticon icon-infocirlceo"></i>
                    <div class="name">info-cirlce-o</div>
                    <div class="fontclass">.icon-infocirlceo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-info"></i>
                    <div class="name">info</div>
                    <div class="fontclass">.icon-info</div>
                </li>
            
                <li>
                <i class="icon anticon icon-exclamation"></i>
                    <div class="name">exclamation</div>
                    <div class="fontclass">.icon-exclamation</div>
                </li>
            
                <li>
                <i class="icon anticon icon-exclamationcircle"></i>
                    <div class="name">exclamation-circle</div>
                    <div class="fontclass">.icon-exclamationcircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-exclamationcircleo"></i>
                    <div class="name">exclamation-circle-o</div>
                    <div class="fontclass">.icon-exclamationcircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-closecircle"></i>
                    <div class="name">close-circle</div>
                    <div class="fontclass">.icon-closecircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-closecircleo"></i>
                    <div class="name">close-circle-o</div>
                    <div class="fontclass">.icon-closecircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-checkcircle"></i>
                    <div class="name">check-circle</div>
                    <div class="fontclass">.icon-checkcircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-checkcircleo"></i>
                    <div class="name">check-circle-o</div>
                    <div class="fontclass">.icon-checkcircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-check"></i>
                    <div class="name">check</div>
                    <div class="fontclass">.icon-check</div>
                </li>
            
                <li>
                <i class="icon anticon icon-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon anticon icon-customerservice"></i>
                    <div class="name">customerservice</div>
                    <div class="fontclass">.icon-customerservice</div>
                </li>
            
                <li>
                <i class="icon anticon icon-creditcard"></i>
                    <div class="name">creditcard</div>
                    <div class="fontclass">.icon-creditcard</div>
                </li>
            
                <li>
                <i class="icon anticon icon-codesquareo"></i>
                    <div class="name">code-square-o</div>
                    <div class="fontclass">.icon-codesquareo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-book"></i>
                    <div class="name">book</div>
                    <div class="fontclass">.icon-book</div>
                </li>
            
                <li>
                <i class="icon anticon icon-barschart"></i>
                    <div class="name">barschart</div>
                    <div class="fontclass">.icon-barschart</div>
                </li>
            
                <li>
                <i class="icon anticon icon-bars"></i>
                    <div class="name">bars</div>
                    <div class="fontclass">.icon-bars</div>
                </li>
            
                <li>
                <i class="icon anticon icon-question"></i>
                    <div class="name">question</div>
                    <div class="fontclass">.icon-question</div>
                </li>
            
                <li>
                <i class="icon anticon icon-questioncircle"></i>
                    <div class="name">question-circle</div>
                    <div class="fontclass">.icon-questioncircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-questioncircleo"></i>
                    <div class="name">question-circle-o</div>
                    <div class="fontclass">.icon-questioncircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pause"></i>
                    <div class="name">pause</div>
                    <div class="fontclass">.icon-pause</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pausecircle"></i>
                    <div class="name">pause-circle</div>
                    <div class="fontclass">.icon-pausecircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pausecircleo"></i>
                    <div class="name">pause-circle-o</div>
                    <div class="fontclass">.icon-pausecircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-clockcircle"></i>
                    <div class="name">clock-circle</div>
                    <div class="fontclass">.icon-clockcircle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-clockcircleo"></i>
                    <div class="name">clock-circle-o</div>
                    <div class="fontclass">.icon-clockcircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-swap"></i>
                    <div class="name">swap</div>
                    <div class="fontclass">.icon-swap</div>
                </li>
            
                <li>
                <i class="icon anticon icon-swapleft"></i>
                    <div class="name">swapleft</div>
                    <div class="fontclass">.icon-swapleft</div>
                </li>
            
                <li>
                <i class="icon anticon icon-swapright"></i>
                    <div class="name">swapright</div>
                    <div class="fontclass">.icon-swapright</div>
                </li>
            
                <li>
                <i class="icon anticon icon-plussquareo"></i>
                    <div class="name">plus-square-o</div>
                    <div class="fontclass">.icon-plussquareo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-frown"></i>
                    <div class="name">frown</div>
                    <div class="fontclass">.icon-frown</div>
                </li>
            
                <li>
                <i class="icon anticon icon-menufold"></i>
                    <div class="name">menufold</div>
                    <div class="fontclass">.icon-menufold</div>
                </li>
            
                <li>
                <i class="icon anticon icon-mail"></i>
                    <div class="name">mail</div>
                    <div class="fontclass">.icon-mail</div>
                </li>
            
                <li>
                <i class="icon anticon icon-link"></i>
                    <div class="name">link</div>
                    <div class="fontclass">.icon-link</div>
                </li>
            
                <li>
                <i class="icon anticon icon-areachart"></i>
                    <div class="name">areachart</div>
                    <div class="fontclass">.icon-areachart</div>
                </li>
            
                <li>
                <i class="icon anticon icon-linechart"></i>
                    <div class="name">linechart</div>
                    <div class="fontclass">.icon-linechart</div>
                </li>
            
                <li>
                <i class="icon anticon icon-home"></i>
                    <div class="name">home</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon anticon icon-laptop"></i>
                    <div class="name">laptop</div>
                    <div class="fontclass">.icon-laptop</div>
                </li>
            
                <li>
                <i class="icon anticon icon-star"></i>
                    <div class="name">star</div>
                    <div class="fontclass">.icon-star</div>
                </li>
            
                <li>
                <i class="icon anticon icon-staro"></i>
                    <div class="name">star-o</div>
                    <div class="fontclass">.icon-staro</div>
                </li>
            
                <li>
                <i class="icon anticon icon-filter"></i>
                    <div class="name">filter</div>
                    <div class="fontclass">.icon-filter</div>
                </li>
            
                <li>
                <i class="icon anticon icon-meho"></i>
                    <div class="name">meho</div>
                    <div class="fontclass">.icon-meho</div>
                </li>
            
                <li>
                <i class="icon anticon icon-meh"></i>
                    <div class="name">meh</div>
                    <div class="fontclass">.icon-meh</div>
                </li>
            
                <li>
                <i class="icon anticon icon-shoppingcart"></i>
                    <div class="name">shoppingcart</div>
                    <div class="fontclass">.icon-shoppingcart</div>
                </li>
            
                <li>
                <i class="icon anticon icon-save"></i>
                    <div class="name">save</div>
                    <div class="fontclass">.icon-save</div>
                </li>
            
                <li>
                <i class="icon anticon icon-user"></i>
                    <div class="name">user</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon anticon icon-videocamera"></i>
                    <div class="name">videocamera</div>
                    <div class="fontclass">.icon-videocamera</div>
                </li>
            
                <li>
                <i class="icon anticon icon-totop"></i>
                    <div class="name">totop</div>
                    <div class="fontclass">.icon-totop</div>
                </li>
            
                <li>
                <i class="icon anticon icon-team"></i>
                    <div class="name">team</div>
                    <div class="fontclass">.icon-team</div>
                </li>
            
                <li>
                <i class="icon anticon icon-sharealt"></i>
                    <div class="name">sharealt</div>
                    <div class="fontclass">.icon-sharealt</div>
                </li>
            
                <li>
                <i class="icon anticon icon-setting"></i>
                    <div class="name">setting</div>
                    <div class="fontclass">.icon-setting</div>
                </li>
            
                <li>
                <i class="icon anticon icon-picture"></i>
                    <div class="name">picture</div>
                    <div class="fontclass">.icon-picture</div>
                </li>
            
                <li>
                <i class="icon anticon icon-phone"></i>
                    <div class="name">phone</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon anticon icon-paperclip"></i>
                    <div class="name">paperclip</div>
                    <div class="fontclass">.icon-paperclip</div>
                </li>
            
                <li>
                <i class="icon anticon icon-notification"></i>
                    <div class="name">notification</div>
                    <div class="fontclass">.icon-notification</div>
                </li>
            
                <li>
                <i class="icon anticon icon-menuunfold"></i>
                    <div class="name">menuunfold</div>
                    <div class="fontclass">.icon-menuunfold</div>
                </li>
            
                <li>
                <i class="icon anticon icon-inbox"></i>
                    <div class="name">inbox</div>
                    <div class="fontclass">.icon-inbox</div>
                </li>
            
                <li>
                <i class="icon anticon icon-lock"></i>
                    <div class="name">lock</div>
                    <div class="fontclass">.icon-lock</div>
                </li>
            
                <li>
                <i class="icon anticon icon-qrcode"></i>
                    <div class="name">qrcode</div>
                    <div class="fontclass">.icon-qrcode</div>
                </li>
            
                <li>
                <i class="icon anticon icon-tags"></i>
                    <div class="name">tags</div>
                    <div class="fontclass">.icon-tags</div>
                </li>
            
                <li>
                <i class="icon anticon icon-tagso"></i>
                    <div class="name">tagso</div>
                    <div class="fontclass">.icon-tagso</div>
                </li>
            
                <li>
                <i class="icon anticon icon-cloudo"></i>
                    <div class="name">cloud-o</div>
                    <div class="fontclass">.icon-cloudo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-cloud"></i>
                    <div class="name">cloud</div>
                    <div class="fontclass">.icon-cloud</div>
                </li>
            
                <li>
                <i class="icon anticon icon-cloudupload"></i>
                    <div class="name">cloudupload</div>
                    <div class="fontclass">.icon-cloudupload</div>
                </li>
            
                <li>
                <i class="icon anticon icon-clouddownload"></i>
                    <div class="name">clouddownload</div>
                    <div class="fontclass">.icon-clouddownload</div>
                </li>
            
                <li>
                <i class="icon anticon icon-clouddownloado"></i>
                    <div class="name">clouddownload-o</div>
                    <div class="fontclass">.icon-clouddownloado</div>
                </li>
            
                <li>
                <i class="icon anticon icon-clouduploado"></i>
                    <div class="name">cloudupload-o</div>
                    <div class="fontclass">.icon-clouduploado</div>
                </li>
            
                <li>
                <i class="icon anticon icon-enviroment"></i>
                    <div class="name">enviroment</div>
                    <div class="fontclass">.icon-enviroment</div>
                </li>
            
                <li>
                <i class="icon anticon icon-enviromento"></i>
                    <div class="name">enviroment-o</div>
                    <div class="fontclass">.icon-enviromento</div>
                </li>
            
                <li>
                <i class="icon anticon icon-eye"></i>
                    <div class="name">eye</div>
                    <div class="fontclass">.icon-eye</div>
                </li>
            
                <li>
                <i class="icon anticon icon-eyeo"></i>
                    <div class="name">eye-o</div>
                    <div class="fontclass">.icon-eyeo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-camera"></i>
                    <div class="name">camera</div>
                    <div class="fontclass">.icon-camera</div>
                </li>
            
                <li>
                <i class="icon anticon icon-camerao"></i>
                    <div class="name">camera-o</div>
                    <div class="fontclass">.icon-camerao</div>
                </li>
            
                <li>
                <i class="icon anticon icon-windows"></i>
                    <div class="name">windows</div>
                    <div class="fontclass">.icon-windows</div>
                </li>
            
                <li>
                <i class="icon anticon icon-export2"></i>
                    <div class="name">export2</div>
                    <div class="fontclass">.icon-export2</div>
                </li>
            
                <li>
                <i class="icon anticon icon-export"></i>
                    <div class="name">export</div>
                    <div class="fontclass">.icon-export</div>
                </li>
            
                <li>
                <i class="icon anticon icon-circledowno"></i>
                    <div class="name">circledown-o</div>
                    <div class="fontclass">.icon-circledowno</div>
                </li>
            
                <li>
                <i class="icon anticon icon-circledown"></i>
                    <div class="name">circledown</div>
                    <div class="fontclass">.icon-circledown</div>
                </li>
            
                <li>
                <i class="icon anticon icon-hdd"></i>
                    <div class="name">hdd</div>
                    <div class="fontclass">.icon-hdd</div>
                </li>
            
                <li>
                <i class="icon anticon icon-ie"></i>
                    <div class="name">ie</div>
                    <div class="fontclass">.icon-ie</div>
                </li>
            
                <li>
                <i class="icon anticon icon-delete"></i>
                    <div class="name">delete</div>
                    <div class="fontclass">.icon-delete</div>
                </li>
            
                <li>
                <i class="icon anticon icon-enter"></i>
                    <div class="name">enter</div>
                    <div class="fontclass">.icon-enter</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pushpino"></i>
                    <div class="name">pushpin-o</div>
                    <div class="fontclass">.icon-pushpino</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pushpin"></i>
                    <div class="name">pushpin</div>
                    <div class="fontclass">.icon-pushpin</div>
                </li>
            
                <li>
                <i class="icon anticon icon-heart"></i>
                    <div class="name">heart</div>
                    <div class="fontclass">.icon-heart</div>
                </li>
            
                <li>
                <i class="icon anticon icon-hearto"></i>
                    <div class="name">heart-o</div>
                    <div class="fontclass">.icon-hearto</div>
                </li>
            
                <li>
                <i class="icon anticon icon-smile-circle"></i>
                    <div class="name">smile</div>
                    <div class="fontclass">.icon-smile-circle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-smileo"></i>
                    <div class="name">smile-o</div>
                    <div class="fontclass">.icon-smileo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-frowno"></i>
                    <div class="name">frown-o</div>
                    <div class="fontclass">.icon-frowno</div>
                </li>
            
                <li>
                <i class="icon anticon icon-calculator"></i>
                    <div class="name">calculator</div>
                    <div class="fontclass">.icon-calculator</div>
                </li>
            
                <li>
                <i class="icon anticon icon-chrome"></i>
                    <div class="name">chrome</div>
                    <div class="fontclass">.icon-chrome</div>
                </li>
            
                <li>
                <i class="icon anticon icon-github"></i>
                    <div class="name">github</div>
                    <div class="fontclass">.icon-github</div>
                </li>
            
                <li>
                <i class="icon anticon icon-iconfontdesktop"></i>
                    <div class="name">desktop</div>
                    <div class="fontclass">.icon-iconfontdesktop</div>
                </li>
            
                <li>
                <i class="icon anticon icon-caretcircleoup"></i>
                    <div class="name">caret-circle-o-up</div>
                    <div class="fontclass">.icon-caretcircleoup</div>
                </li>
            
                <li>
                <i class="icon anticon icon-upload"></i>
                    <div class="name">upload</div>
                    <div class="fontclass">.icon-upload</div>
                </li>
            
                <li>
                <i class="icon anticon icon-download"></i>
                    <div class="name">download</div>
                    <div class="fontclass">.icon-download</div>
                </li>
            
                <li>
                <i class="icon anticon icon-piechart"></i>
                    <div class="name">piechart</div>
                    <div class="fontclass">.icon-piechart</div>
                </li>
            
                <li>
                <i class="icon anticon icon-lock1"></i>
                    <div class="name">lock</div>
                    <div class="fontclass">.icon-lock1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-unlock"></i>
                    <div class="name">unlock</div>
                    <div class="fontclass">.icon-unlock</div>
                </li>
            
                <li>
                <i class="icon anticon icon-windowso"></i>
                    <div class="name">windows-o</div>
                    <div class="fontclass">.icon-windowso</div>
                </li>
            
                <li>
                <i class="icon anticon icon-dotchart"></i>
                    <div class="name">dotchart</div>
                    <div class="fontclass">.icon-dotchart</div>
                </li>
            
                <li>
                <i class="icon anticon icon-barchart"></i>
                    <div class="name">barchart</div>
                    <div class="fontclass">.icon-barchart</div>
                </li>
            
                <li>
                <i class="icon anticon icon-codesquare"></i>
                    <div class="name">code-square</div>
                    <div class="fontclass">.icon-codesquare</div>
                </li>
            
                <li>
                <i class="icon anticon icon-plussquare"></i>
                    <div class="name">plus-square</div>
                    <div class="fontclass">.icon-plussquare</div>
                </li>
            
                <li>
                <i class="icon anticon icon-minussquare"></i>
                    <div class="name">minus-square</div>
                    <div class="fontclass">.icon-minussquare</div>
                </li>
            
                <li>
                <i class="icon anticon icon-closesquare"></i>
                    <div class="name">close-square</div>
                    <div class="fontclass">.icon-closesquare</div>
                </li>
            
                <li>
                <i class="icon anticon icon-closesquareo"></i>
                    <div class="name">close-square-o</div>
                    <div class="fontclass">.icon-closesquareo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-checksquare"></i>
                    <div class="name">check-square</div>
                    <div class="fontclass">.icon-checksquare</div>
                </li>
            
                <li>
                <i class="icon anticon icon-checksquareo"></i>
                    <div class="name">check-square-o</div>
                    <div class="fontclass">.icon-checksquareo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-fastbackward"></i>
                    <div class="name">fastbackward</div>
                    <div class="fontclass">.icon-fastbackward</div>
                </li>
            
                <li>
                <i class="icon anticon icon-fastforward"></i>
                    <div class="name">fastforward</div>
                    <div class="fontclass">.icon-fastforward</div>
                </li>
            
                <li>
                <i class="icon anticon icon-upsquare"></i>
                    <div class="name">up-square</div>
                    <div class="fontclass">.icon-upsquare</div>
                </li>
            
                <li>
                <i class="icon anticon icon-downsquare"></i>
                    <div class="name">down-square</div>
                    <div class="fontclass">.icon-downsquare</div>
                </li>
            
                <li>
                <i class="icon anticon icon-leftsquare"></i>
                    <div class="name">left-square</div>
                    <div class="fontclass">.icon-leftsquare</div>
                </li>
            
                <li>
                <i class="icon anticon icon-rightsquare"></i>
                    <div class="name">right-square</div>
                    <div class="fontclass">.icon-rightsquare</div>
                </li>
            
                <li>
                <i class="icon anticon icon-rightsquareo"></i>
                    <div class="name">right-square-o</div>
                    <div class="fontclass">.icon-rightsquareo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-leftsquareo"></i>
                    <div class="name">left-square-o</div>
                    <div class="fontclass">.icon-leftsquareo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-down-square-o"></i>
                    <div class="name">down-square-o</div>
                    <div class="fontclass">.icon-down-square-o</div>
                </li>
            
                <li>
                <i class="icon anticon icon-up-square-o"></i>
                    <div class="name">up-square-o</div>
                    <div class="fontclass">.icon-up-square-o</div>
                </li>
            
                <li>
                <i class="icon anticon icon-play"></i>
                    <div class="name">play</div>
                    <div class="fontclass">.icon-play</div>
                </li>
            
                <li>
                <i class="icon anticon icon-playcircleo"></i>
                    <div class="name">play-circle-o</div>
                    <div class="fontclass">.icon-playcircleo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-tag"></i>
                    <div class="name">tag</div>
                    <div class="fontclass">.icon-tag</div>
                </li>
            
                <li>
                <i class="icon anticon icon-tago"></i>
                    <div class="name">tag-o</div>
                    <div class="fontclass">.icon-tago</div>
                </li>
            
                <li>
                <i class="icon anticon icon-addfile"></i>
                    <div class="name">addfile</div>
                    <div class="fontclass">.icon-addfile</div>
                </li>
            
                <li>
                <i class="icon anticon icon-folder1"></i>
                    <div class="name">folder</div>
                    <div class="fontclass">.icon-folder1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-file1"></i>
                    <div class="name">file</div>
                    <div class="fontclass">.icon-file1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-switcher"></i>
                    <div class="name">switcher</div>
                    <div class="fontclass">.icon-switcher</div>
                </li>
            
                <li>
                <i class="icon anticon icon-addfolder"></i>
                    <div class="name">addfolder</div>
                    <div class="fontclass">.icon-addfolder</div>
                </li>
            
                <li>
                <i class="icon anticon icon-folderopen"></i>
                    <div class="name">folderopen</div>
                    <div class="fontclass">.icon-folderopen</div>
                </li>
            
                <li>
                <i class="icon anticon icon-search1"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-ellipsis1"></i>
                    <div class="name">ellipsis</div>
                    <div class="fontclass">.icon-ellipsis1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-calendar"></i>
                    <div class="name">calendar</div>
                    <div class="fontclass">.icon-calendar</div>
                </li>
            
                <li>
                <i class="icon anticon icon-filetext1"></i>
                    <div class="name">filetext</div>
                    <div class="fontclass">.icon-filetext1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-copy1"></i>
                    <div class="name">copy</div>
                    <div class="fontclass">.icon-copy1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-jpgfile1"></i>
                    <div class="name">jpgfile</div>
                    <div class="fontclass">.icon-jpgfile1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pdffile1"></i>
                    <div class="name">pdffile</div>
                    <div class="fontclass">.icon-pdffile1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-exclefile1"></i>
                    <div class="name">exclefile</div>
                    <div class="fontclass">.icon-exclefile1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pptfile1"></i>
                    <div class="name">pptfile</div>
                    <div class="fontclass">.icon-pptfile1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-unknowfile1"></i>
                    <div class="name">unknowfile</div>
                    <div class="fontclass">.icon-unknowfile1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-wordfile1"></i>
                    <div class="name">wordfile</div>
                    <div class="fontclass">.icon-wordfile1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-dingding"></i>
                    <div class="name">dingding</div>
                    <div class="fontclass">.icon-dingding</div>
                </li>
            
                <li>
                <i class="icon anticon icon-dingding-o"></i>
                    <div class="name">dingding-o</div>
                    <div class="fontclass">.icon-dingding-o</div>
                </li>
            
                <li>
                <i class="icon anticon icon-mobile1"></i>
                    <div class="name">mobile</div>
                    <div class="fontclass">.icon-mobile1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-tablet1"></i>
                    <div class="name">tablet</div>
                    <div class="fontclass">.icon-tablet1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-bells"></i>
                    <div class="name">bells</div>
                    <div class="fontclass">.icon-bells</div>
                </li>
            
                <li>
                <i class="icon anticon icon-disconnect"></i>
                    <div class="name">disconnect</div>
                    <div class="fontclass">.icon-disconnect</div>
                </li>
            
                <li>
                <i class="icon anticon icon-database"></i>
                    <div class="name">database</div>
                    <div class="fontclass">.icon-database</div>
                </li>
            
                <li>
                <i class="icon anticon icon-barcode"></i>
                    <div class="name">barcode</div>
                    <div class="fontclass">.icon-barcode</div>
                </li>
            
                <li>
                <i class="icon anticon icon-hourglass"></i>
                    <div class="name">hourglass</div>
                    <div class="fontclass">.icon-hourglass</div>
                </li>
            
                <li>
                <i class="icon anticon icon-key"></i>
                    <div class="name">key</div>
                    <div class="fontclass">.icon-key</div>
                </li>
            
                <li>
                <i class="icon anticon icon-flag"></i>
                    <div class="name">flag</div>
                    <div class="fontclass">.icon-flag</div>
                </li>
            
                <li>
                <i class="icon anticon icon-layout"></i>
                    <div class="name">layout</div>
                    <div class="fontclass">.icon-layout</div>
                </li>
            
                <li>
                <i class="icon anticon icon-printer"></i>
                    <div class="name">printer</div>
                    <div class="fontclass">.icon-printer</div>
                </li>
            
                <li>
                <i class="icon anticon icon-USB"></i>
                    <div class="name">USB</div>
                    <div class="fontclass">.icon-USB</div>
                </li>
            
                <li>
                <i class="icon anticon icon-skin"></i>
                    <div class="name">skin</div>
                    <div class="fontclass">.icon-skin</div>
                </li>
            
                <li>
                <i class="icon anticon icon-tool"></i>
                    <div class="name">tool</div>
                    <div class="fontclass">.icon-tool</div>
                </li>
            
                <li>
                <i class="icon anticon icon-car"></i>
                    <div class="name">car</div>
                    <div class="fontclass">.icon-car</div>
                </li>
            
                <li>
                <i class="icon anticon icon-addusergroup"></i>
                    <div class="name">addusergroup</div>
                    <div class="fontclass">.icon-addusergroup</div>
                </li>
            
                <li>
                <i class="icon anticon icon-carryout"></i>
                    <div class="name">carryout</div>
                    <div class="fontclass">.icon-carryout</div>
                </li>
            
                <li>
                <i class="icon anticon icon-deleteuser"></i>
                    <div class="name">deleteuser</div>
                    <div class="fontclass">.icon-deleteuser</div>
                </li>
            
                <li>
                <i class="icon anticon icon-deleteusergroup"></i>
                    <div class="name">deleteusergroup</div>
                    <div class="fontclass">.icon-deleteusergroup</div>
                </li>
            
                <li>
                <i class="icon anticon icon-man"></i>
                    <div class="name">man</div>
                    <div class="fontclass">.icon-man</div>
                </li>
            
                <li>
                <i class="icon anticon icon-isv"></i>
                    <div class="name">isv</div>
                    <div class="fontclass">.icon-isv</div>
                </li>
            
                <li>
                <i class="icon anticon icon-gift"></i>
                    <div class="name">gift</div>
                    <div class="fontclass">.icon-gift</div>
                </li>
            
                <li>
                <i class="icon anticon icon-idcard"></i>
                    <div class="name">idcard</div>
                    <div class="fontclass">.icon-idcard</div>
                </li>
            
                <li>
                <i class="icon anticon icon-medicinebox"></i>
                    <div class="name">medicinebox</div>
                    <div class="fontclass">.icon-medicinebox</div>
                </li>
            
                <li>
                <i class="icon anticon icon-redenvelopes"></i>
                    <div class="name">redenvelopes</div>
                    <div class="fontclass">.icon-redenvelopes</div>
                </li>
            
                <li>
                <i class="icon anticon icon-rest"></i>
                    <div class="name">rest</div>
                    <div class="fontclass">.icon-rest</div>
                </li>
            
                <li>
                <i class="icon anticon icon-Safety"></i>
                    <div class="name">Safety</div>
                    <div class="fontclass">.icon-Safety</div>
                </li>
            
                <li>
                <i class="icon anticon icon-wallet"></i>
                    <div class="name">wallet</div>
                    <div class="fontclass">.icon-wallet</div>
                </li>
            
                <li>
                <i class="icon anticon icon-woman"></i>
                    <div class="name">woman</div>
                    <div class="fontclass">.icon-woman</div>
                </li>
            
                <li>
                <i class="icon anticon icon-adduser"></i>
                    <div class="name">adduser</div>
                    <div class="fontclass">.icon-adduser</div>
                </li>
            
                <li>
                <i class="icon anticon icon-bank"></i>
                    <div class="name">bank</div>
                    <div class="fontclass">.icon-bank</div>
                </li>
            
                <li>
                <i class="icon anticon icon-Trophy"></i>
                    <div class="name">Trophy</div>
                    <div class="fontclass">.icon-Trophy</div>
                </li>
            
                <li>
                <i class="icon anticon icon-loading1"></i>
                    <div class="name">loading</div>
                    <div class="fontclass">.icon-loading1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-loading2"></i>
                    <div class="name">loading</div>
                    <div class="fontclass">.icon-loading2</div>
                </li>
            
                <li>
                <i class="icon anticon icon-like2"></i>
                    <div class="name">like</div>
                    <div class="fontclass">.icon-like2</div>
                </li>
            
                <li>
                <i class="icon anticon icon-dislike2"></i>
                    <div class="name">dislike</div>
                    <div class="fontclass">.icon-dislike2</div>
                </li>
            
                <li>
                <i class="icon anticon icon-like1"></i>
                    <div class="name">like</div>
                    <div class="fontclass">.icon-like1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-dislike1"></i>
                    <div class="name">dislike</div>
                    <div class="fontclass">.icon-dislike1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-bulb1"></i>
                    <div class="name">bulb</div>
                    <div class="fontclass">.icon-bulb1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-rocket1"></i>
                    <div class="name">rocket</div>
                    <div class="fontclass">.icon-rocket1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-select1"></i>
                    <div class="name">select</div>
                    <div class="fontclass">.icon-select1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-apple1"></i>
                    <div class="name">apple</div>
                    <div class="fontclass">.icon-apple1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-apple-o"></i>
                    <div class="name">apple-o</div>
                    <div class="fontclass">.icon-apple-o</div>
                </li>
            
                <li>
                <i class="icon anticon icon-android1"></i>
                    <div class="name">android</div>
                    <div class="fontclass">.icon-android1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-android"></i>
                    <div class="name">android-o</div>
                    <div class="fontclass">.icon-android</div>
                </li>
            
                <li>
                <i class="icon anticon icon-aliwangwang-o1"></i>
                    <div class="name">aliwangwang-o</div>
                    <div class="fontclass">.icon-aliwangwang-o1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-aliwangwang"></i>
                    <div class="name">aliwangwang</div>
                    <div class="fontclass">.icon-aliwangwang</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pay-circle1"></i>
                    <div class="name">pay-circle</div>
                    <div class="fontclass">.icon-pay-circle1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-pay-circle-o1"></i>
                    <div class="name">pay-circle-o</div>
                    <div class="fontclass">.icon-pay-circle-o1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-poweroff"></i>
                    <div class="name">poweroff</div>
                    <div class="fontclass">.icon-poweroff</div>
                </li>
            
                <li>
                <i class="icon anticon icon-trademark"></i>
                    <div class="name">trademark</div>
                    <div class="fontclass">.icon-trademark</div>
                </li>
            
                <li>
                <i class="icon anticon icon-find"></i>
                    <div class="name">find</div>
                    <div class="fontclass">.icon-find</div>
                </li>
            
                <li>
                <i class="icon anticon icon-copyright"></i>
                    <div class="name">copyright</div>
                    <div class="fontclass">.icon-copyright</div>
                </li>
            
                <li>
                <i class="icon anticon icon-sound"></i>
                    <div class="name">sound</div>
                    <div class="fontclass">.icon-sound</div>
                </li>
            
                <li>
                <i class="icon anticon icon-earth"></i>
                    <div class="name">earth</div>
                    <div class="fontclass">.icon-earth</div>
                </li>
            
                <li>
                <i class="icon anticon icon-wifi"></i>
                    <div class="name">wifi</div>
                    <div class="fontclass">.icon-wifi</div>
                </li>
            
                <li>
                <i class="icon anticon icon-sync"></i>
                    <div class="name">sync</div>
                    <div class="fontclass">.icon-sync</div>
                </li>
            
                <li>
                <i class="icon anticon icon-login"></i>
                    <div class="name">login</div>
                    <div class="fontclass">.icon-login</div>
                </li>
            
                <li>
                <i class="icon anticon icon-logout"></i>
                    <div class="name">logout</div>
                    <div class="fontclass">.icon-logout</div>
                </li>
            
                <li>
                <i class="icon anticon icon-reload1"></i>
                    <div class="name">reload</div>
                    <div class="fontclass">.icon-reload1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-message1"></i>
                    <div class="name">message</div>
                    <div class="fontclass">.icon-message1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-shake"></i>
                    <div class="name">shake </div>
                    <div class="fontclass">.icon-shake</div>
                </li>
            
                <li>
                <i class="icon anticon icon-API"></i>
                    <div class="name">API</div>
                    <div class="fontclass">.icon-API</div>
                </li>
            
                <li>
                <i class="icon anticon icon-appstore-o"></i>
                    <div class="name">appstore-o</div>
                    <div class="fontclass">.icon-appstore-o</div>
                </li>
            
                <li>
                <i class="icon anticon icon-appstore1"></i>
                    <div class="name">appstore</div>
                    <div class="fontclass">.icon-appstore1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-scan1"></i>
                    <div class="name">scan</div>
                    <div class="fontclass">.icon-scan1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-exception1"></i>
                    <div class="name">exception</div>
                    <div class="fontclass">.icon-exception1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-contacts"></i>
                    <div class="name">contacts</div>
                    <div class="fontclass">.icon-contacts</div>
                </li>
            
                <li>
                <i class="icon anticon icon-solution1"></i>
                    <div class="name">solution</div>
                    <div class="fontclass">.icon-solution1</div>
                </li>
            
                <li>
                <i class="icon anticon icon-fork"></i>
                    <div class="name">fork</div>
                    <div class="fontclass">.icon-fork</div>
                </li>
            
                <li>
                <i class="icon anticon icon-edit"></i>
                    <div class="name">edit</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon anticon icon-form"></i>
                    <div class="name">表单</div>
                    <div class="fontclass">.icon-form</div>
                </li>
            
                <li>
                <i class="icon anticon icon-warning"></i>
                    <div class="name">error</div>
                    <div class="fontclass">.icon-warning</div>
                </li>
            
                <li>
                <i class="icon anticon icon-table"></i>
                    <div class="name">列表</div>
                    <div class="fontclass">.icon-table</div>
                </li>
            
                <li>
                <i class="icon anticon icon-profile"></i>
                    <div class="name">详情</div>
                    <div class="fontclass">.icon-profile</div>
                </li>
            
                <li>
                <i class="icon anticon icon-dashboard"></i>
                    <div class="name">dashboard</div>
                    <div class="fontclass">.icon-dashboard</div>
                </li>
            
                <li>
                <i class="icon anticon icon-indent-left"></i>
                    <div class="name">indent-left</div>
                    <div class="fontclass">.icon-indent-left</div>
                </li>
            
                <li>
                <i class="icon anticon icon-indent-right"></i>
                    <div class="name">indent-right</div>
                    <div class="fontclass">.icon-indent-right</div>
                </li>
            
                <li>
                <i class="icon anticon icon-menu-unfold"></i>
                    <div class="name">menu-unfold</div>
                    <div class="fontclass">.icon-menu-unfold</div>
                </li>
            
                <li>
                <i class="icon anticon icon-menu-fold"></i>
                    <div class="name">menu-fold</div>
                    <div class="fontclass">.icon-menu-fold</div>
                </li>
            
                <li>
                <i class="icon anticon icon-antdesign"></i>
                    <div class="name">ant design</div>
                    <div class="fontclass">.icon-antdesign</div>
                </li>
            
                <li>
                <i class="icon anticon icon-alipay-square"></i>
                    <div class="name">alipay-square</div>
                    <div class="fontclass">.icon-alipay-square</div>
                </li>
            
                <li>
                <i class="icon anticon icon-codepen-circle"></i>
                    <div class="name">codepen-circle</div>
                    <div class="fontclass">.icon-codepen-circle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-google"></i>
                    <div class="name">google</div>
                    <div class="fontclass">.icon-google</div>
                </li>
            
                <li>
                <i class="icon anticon icon-amazon"></i>
                    <div class="name">amazon</div>
                    <div class="fontclass">.icon-amazon</div>
                </li>
            
                <li>
                <i class="icon anticon icon-codepen"></i>
                    <div class="name">codepen</div>
                    <div class="fontclass">.icon-codepen</div>
                </li>
            
                <li>
                <i class="icon anticon icon-facebook-square"></i>
                    <div class="name">facebook-square</div>
                    <div class="fontclass">.icon-facebook-square</div>
                </li>
            
                <li>
                <i class="icon anticon icon-dropbox"></i>
                    <div class="name">dropbox</div>
                    <div class="fontclass">.icon-dropbox</div>
                </li>
            
                <li>
                <i class="icon anticon icon-googleplus"></i>
                    <div class="name">google plus</div>
                    <div class="fontclass">.icon-googleplus</div>
                </li>
            
                <li>
                <i class="icon anticon icon-linkedin-square"></i>
                    <div class="name">linkedin-square</div>
                    <div class="fontclass">.icon-linkedin-square</div>
                </li>
            
                <li>
                <i class="icon anticon icon-medium-monogram"></i>
                    <div class="name">medium-monogram</div>
                    <div class="fontclass">.icon-medium-monogram</div>
                </li>
            
                <li>
                <i class="icon anticon icon-gitlab"></i>
                    <div class="name">gitlab</div>
                    <div class="fontclass">.icon-gitlab</div>
                </li>
            
                <li>
                <i class="icon anticon icon-medium-wordmark"></i>
                    <div class="name">medium-wordmark</div>
                    <div class="fontclass">.icon-medium-wordmark</div>
                </li>
            
                <li>
                <i class="icon anticon icon-QQ"></i>
                    <div class="name">QQ</div>
                    <div class="fontclass">.icon-QQ</div>
                </li>
            
                <li>
                <i class="icon anticon icon-skype"></i>
                    <div class="name">skype</div>
                    <div class="fontclass">.icon-skype</div>
                </li>
            
                <li>
                <i class="icon anticon icon-taobao-square"></i>
                    <div class="name">taobao-square</div>
                    <div class="fontclass">.icon-taobao-square</div>
                </li>
            
                <li>
                <i class="icon anticon icon-alipay-circle"></i>
                    <div class="name">alipay-circle</div>
                    <div class="fontclass">.icon-alipay-circle</div>
                </li>
            
                <li>
                <i class="icon anticon icon-youtube"></i>
                    <div class="name">youtube</div>
                    <div class="fontclass">.icon-youtube</div>
                </li>
            
                <li>
                <i class="icon anticon icon-wechat"></i>
                    <div class="name">wechat</div>
                    <div class="fontclass">.icon-wechat</div>
                </li>
            
                <li>
                <i class="icon anticon icon-twitter"></i>
                    <div class="name">twitter</div>
                    <div class="fontclass">.icon-twitter</div>
                </li>
            
                <li>
                <i class="icon anticon icon-weibo"></i>
                    <div class="name">weibo</div>
                    <div class="fontclass">.icon-weibo</div>
                </li>
            
                <li>
                <i class="icon anticon icon-HTML"></i>
                    <div class="name">HTML5</div>
                    <div class="fontclass">.icon-HTML</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">anticon</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"anticon"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
